<section id="template-edit-preview">
  <div class="tmp-preview-title ptb-10 clearfix">
    <h3 class="font-16 pull-left font-nm">账单打印模版</h3>
  </div>
  <section>
    <h3 class="tmp-preview-name">{{moduleName}}</h3>
    <!-- 模版 -->
    <section id="print-content">
      <div class="tmp-preview-wrap" :style="pageStyle">
        <!-- 头部 -->
        <div>
            <div v-for="(item,index) in headPerData" class="preview-Item">
              <div :class="{textLeft:item1.elePosition == 'TL' , textCenter:item1.elePosition == 'TC' , textRight:item1.elePosition == 'TR' ,
                   w50:item1.width == 'w50' , w33:item1.width == 'w33' , w00:item1.width == 'w00' , w100:item1.width == 'w100' ,
                   font12:item1.eleSize == '12', font14:item1.eleSize == '14' , font16:item1.eleSize == '16' , font18:item1.eleSize == '18'
                }"
                  v-for="(item1,index1) in item"
              >
                <span v-if="item1.eleType === 'sys' ">
                  <span>{{item1.eleDispName}}:</span>
                  <span>{{item1.eleValue}}</span>
                </span>
                <span v-if="item1.eleType === 'txt' ">
                  <span>{{item1.eleValue}}</span>
                </span>
                <span v-if="item1.eleType === 'ph' "></span>
              </div>
            </div>
        </div>
        <!-- 中部 -->
        <div>
          <div class="tbhead">
            <table cellpadding="0" cellspacing="0" width='100%' style="border-top:1px solid #333;">
              <tr>
                <th v-for="(item,index) in tbHead" v-if="item.eleShow == 'Y'">{{item.eleDispName ? item.eleDispName : item.eleName}}</th>
              </tr>
              <tr v-for="(item,index) in tbContent" >
                <td v-for="(item1,index1) in item" v-if="item1.eleShow == 'Y'">{{item1.value | formatUndefined}}</td>
              </tr>
            </table>

          </div>
        </div>
        <!-- 尾部 -->
        <div>
            <div v-for="(item,index) in footerPerData" class="preview-Item">
              <div :class="{textLeft:item1.elePosition == 'TL' , textCenter:item1.elePosition == 'TC' , textRight:item1.elePosition == 'TR' ,
                   w50:item1.width == 'w50' , w33:item1.width == 'w33' , w00:item1.width == 'w00' , w100:item1.width == 'w100' ,
                   font12:item1.eleSize == '12', font14:item1.eleSize == '14' , font16:item1.eleSize == '16' , font18:item1.eleSize == '18'
                }"
                  v-for="(item1,index1) in item"
              >
                <span v-if="item1.eleType === 'sys' ">
                  <span>{{item1.eleDispName}}:</span>
                  <span>{{item1.eleVal}}</span>
                </span>
                <span v-if="item1.eleType === 'txt' ">
                  <span>{{item1.eleValue}}</span>
                </span>
                <span v-if="item1.eleType === 'ph' "></span>
              </div>
            </div>
        </div>

        <!-- 水印图 -->
        <div class="watermark-preview-wrap" v-for="(item,index) in watermarkData">
          <img class="watermark-preview-image" :src="item.url" alt="水印图" :style="watermarkStyle[index]">
          <div class="mark" :style="watermarkStyle[index]">
            <span class="edit" @click="editWatermark(index)">编辑</span>
            <span class="del" @click="deleteWatermark(index)">删除</span>
          </div>
        </div>

      </div>
    </section>
  </section>

  <div class="tmp-tail-line"></div>
  <div style="marginLeft:24px;marginBottom:10px;">
    <hl-button @on-click="editTemplate">编辑模版</hl-button>
    <hl-button @on-click="saveTemplate">保存模版</hl-button>
    <hl-button @on-click="showWatermarkLayer">添加水印</hl-button>
  </div>

  <!-- 添加水印 -->
  <div class="pop box-o-shadow tmp-watermark-pop" v-show="isShowWatermarkLayer" style="width:600px;">
    <div class="head-pop font-16"><span>添加水印</span>
      <button class="fw-close absolute close" type="button" @click="closeWatermarkLayer">×</button>
    </div>
    <div class="content-pop">
      <div class="content" style="padding:20px 10px;">
        <div class="dy-flex mb-10">
          <div class="dy-fx-1 line-34">图片：</div>
          <div class="dy-fx-8 image-wrap">
            <img :src="watermarkUrl" alt="水印图片" v-if="watermarkUrl">
            <button type="button" class="btn n-btn-default" id="upload-watermark">{{watermarkBtn}}</button>
          </div>
        </div>
        <div class="dy-flex mb-10">
          <div class="dy-fx-1 line-34">尺寸：</div>
          <div class="dy-fx-8 size-wrap">
            <div>
              <span>宽</span>
              <input type="number" class="form-control" v-model="imageWidth">
            </div>
            <div>
              <span>高</span>
              <input type="number" class="form-control" v-model="imageHeight">
            </div>
          </div>
        </div>
        <div class="dy-flex">
          <div class="dy-fx-1 line-34">位置：</div>
          <div class="dy-fx-8 position-wrap">
            <ul>
              <li v-for="(item,index) in positionList" :class="{'active':watermarkPosition == item.name}" @click="selectPosition(item.name)">{{item.name}}</li>
            </ul>
          </div>
        </div>
        <div class="dy-flex">
          <div class="dy-fx-1 line-34">边距：</div>
          <div class="dy-fx-8 size-wrap">
            <div v-for="(item,index) in marginList">
              <span>{{item.name}}</span>
              <input type="number" class="form-control" v-model="item.value">
            </div>
          </div>
        </div>
        <div class="dy-flex mb-10">
          <div class="dy-fx-1 line-34">透明度：</div>
          <div class="dy-fx-8 opacity-wrap">
            <input type="range" value="0" id="slideIpt">
            <div class="range-value-wrap">
              <img src="assets/images/range_arrow.png" alt="">
              <div class="content">{{opacityValue}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fw-button">
      <hl-button type="primary"  @on-click="confirmAddWatermark">确认</hl-button>
      <hl-button type="outline"  @on-click="closeWatermarkLayer">取消</hl-button>
    </div>
  </div>

  <div class="backdrop" v-if="isShowWatermarkLayer"></div>
</section>

<script src="modules/print_template/scripts/bill_tmp_edit_preview.js" charset="utf-8"></script>
